body {
    height: 100vh;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}

html::before {
    content: ' ';
    display: block;
    background-image:  url(../img01/background3.jpg);
    background-position: center;
    background-size: cover;
    height: 100vh; width: 100vw;
    position: fixed;
    z-index: -10;
}



/* Kartenfarbe VAR ----------------ANFANG-----------------------*/
:root {
    --background-image2: #ffffff79;
    --highlight-color: #24e1cb;
    --text-color: #000000;
    --font-small: 0.7rem;
    --font-small-p: 0.85rem;
    --font-small-ip: 0.80rem;
    --font-medium: 1.21rem;
}
/* Kartenfarbe VAR ----------------ENDE-------------------------*/
.containermenu {
    display: flex;
    flex-wrap: wrap;
    margin: 10px 10px;
    align-items: center;
    padding: 2%;
}
.heading h3 {
    border-bottom: 2px solid #000000;
    padding-bottom: 8px;
    text-align: justify;
    color: rgb(0, 0, 0);
    font-size: 20px;
}
a:link {
    text-decoration:none;
}
.back {
    margin: 70px 200px 20px 0;
    font-size: 1.5em;
    font-weight:lighter;
    border-bottom: 50px solid #9eff4a;
    position: relative;
    border-radius: 15px;
    letter-spacing: 1px;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
}
/* KARTEN ALLE------------------------------------------------ANFANG-------------------*/
.gallery {
    display: grid;
    justify-content: center;
    align-items: center;
    margin: 10px;
    padding: 2%;
    gap: 8px;
    box-sizing: border-box;
}

/* BOX BLUR--------------------ANFANG------------------------------------------------*/
.gallery .box {
    position: relative;
    height: auto;
    background:var(--background-image2);
    border-radius: 20px;
    box-shadow: 0px 20px 25px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    border-inline: solid;
    color: var(--highlight-color);
    backdrop-filter: blur(10px);
   }
   /* BOX BLUR--------------------ENDE--------------------------------------------------*/
.gallery .box img {
    width: 100%;
    background:var(--background-image);
    box-shadow: 0px 20px 25px rgba(0, 0, 0, 0.25);
}
.content p{
    position: relative;
    padding: 1px; /* Fügt einen Abstand um den Text hinzu */
    height: auto; /* Sicherstellt, dass die Höhe variabel ist */
    z-index: 10;
    color: var(--text-color);
    font-size: var(--font-small-p);
} 

/* ---------------------------------------------ANFANG--KARTEN-----------*/
.gallery .box .sticker {
    float: right;
    width: 40%;
    height: 35px;
    border-bottom-left-radius: 30px 30px;   
    border-top-left-radius: 30px 30px;
    background: var(--streifen-color, gray); /* Standardfarbe */
    mask-image: radial-gradient(circle at 50% 37%, black 48%, rgb(0 0 0 / 0.6) 48%);
}
.sticker h3 span{
    font-weight: 400;
    font-size: var(--font-small);
    color: var(--text-color);
    display: block;
    position: relative; /* Standardmäßig relativ zum Fluss des Dokuments */
    top: 5px; /* Verschiebt das Element über das h3 */
} 
.sticker h3{
    white-space: nowrap; /* Verhindert Zeilenumbrüche */
    font-size: var(--font-medium);
    color: var(--text-color);
    margin: 0px; /* Entferne Abstände, um besser zu kontrollieren */
    position: relative;
    text-align: right; /* Text rechtsbündig */
    direction: rtl; /* Richtet den Fließtext von rechts nach links aus */
    top: -3px; /* Verschiebt das Element über das h3 */
} 
/* ---------------------------------------------ENDE--KARTEN----------------*/


/* Standard Grid für größere Bildschirme (ab 1025px) */
@media screen and (min-width: 1025px) {
    .gallery {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 Spalten */
        gap: 10px;
        padding: 20px;
    }
    .content p {
        font-size: 12px; /* Kleinere Schriftgröße für kleinere Bildschirme */
        display: inline-block; /* Ermöglicht, dass die Box ihre Größe automatisch an den Inhalt anpasst */
    }
}
@media screen and (min-width: 1025px) {
    .gallery {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 Spalten */
        gap: 10px;
        padding: 20px;
    }
    .content p {
        font-size: var(--font-small-p); /* Größere Schriftgröße für größere Bildschirme */
        padding: 10px;
    }
}

/* Für iPad Pro (1024px bis 1199px, 2 Spalten) */
@media screen and (min-width: 1024px) and (max-width: 1199px) {
    .gallery {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 Spalten */
        gap: 10px; /* Etwas mehr Abstand für größere Bildschirme */
        padding: 20px;
    }
}

/* Für Tablets und größere Smartphones (769px bis 1024px, 2 Spalten) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .gallery, .containermenu {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 Spalten */
        gap: 15px; /* Etwas mehr Abstand für Tablets */
        padding: 15px;
    }
}

/* iPhone und kleine Geräte (1 Spalte: Bis max. 768px) */
@media screen and (max-width: 768px) {
    .gallery, .containermenu {
        display: grid;
        grid-template-columns: 1fr; /* 1 Spalte */
        gap: 10px; /* Weniger Abstand auf kleinen Bildschirmen */
        padding: 10px; /* Weniger Padding auf kleinen Bildschirmen */
    }
    .content p{
        font-size: var(--font-small-ip);
        color: #191919;
        padding-left: 5px;
        padding-right: 5px; 
    } 
}